<template>
    <a-drawer v-model:open="draW.opendrawer" class="custom-class" root-class-name="root-class-name"
        :headerStyle="{ color: 'var(--wang-text-color)' }" :maskStyle="{ width: '100vw', height: '100vh' }"
        style="color: var(--wang-text-color);background-color: var(--wangwang-drwer-bgcolor)" placement="right"
        @after-open-change="afterOpenChange" width="300">
        <template v-slot:title>
            <span style="color: var(--wang-text-color);"> 主题配置</span>
        </template>
        <a-divider>全局</a-divider>
        <div class="drawerItem">
            <span>
                夜间模式
            </span>
            <a-switch v-model:checked="checked" @change="handleThemeChange" />
        </div>

        <a-divider>顶栏设置</a-divider>
        <div class="drawerItem">
            <span>
                背景颜色
            </span>
            <color-picker @finish="TopsetBGs" v-model:rgba="themeConfigSetting.TopbgColor"></color-picker>
        </div>
        <div class="drawerItem">
            <span>
                字体颜色
            </span>
            <color-picker @finish="TopsetBGs" v-model:rgba="themeConfigSetting.TopfontColor"></color-picker>
        </div>

        <a-divider>菜单设置</a-divider>
        <div class="drawerItem">
            <span>
                背景颜色
            </span>
            <color-picker @finish="TopsetBGs" v-model:rgba="themeConfigSetting.menubgColor"></color-picker>
        </div>
        <div class="drawerItem">
            <span>
                字体颜色
            </span>
            <color-picker @finish="TopsetBGs" v-model:rgba="themeConfigSetting.menufontColor"></color-picker>
        </div>
        <div class="drawerItem">
            <span>
                选中背景颜色
            </span>
            <color-picker @finish="TopsetBGs" v-model:rgba="themeConfigSetting.menuSelectedColor"></color-picker>
        </div>
        <div class="drawerItem">
            <span>
                选中字体颜色
            </span>
            <color-picker @finish="TopsetBGs" v-model:rgba="themeConfigSetting.menuselectfontcolor"></color-picker>
        </div>

        <div class="drawerItem">
            <span>
                是否显示LOGO
            </span>
            <a-switch v-model:checked="themeConfigSetting.IsLogo" @change="TopsetBGs" size="small" />
        </div>
        <div class="drawerItem">
            <span>
                是否允许多级菜单展开
            </span>
            <a-switch v-model:checked="themeConfigSetting.MenuExpansion" @change="TopsetBGs" size="small" />
        </div>

        <a-divider>其他设置</a-divider>
        <div class="drawerItem">
            <span>
                tagView栏
            </span>
            <a-select v-model:value="themeConfigSetting.tagViewValue" :options="tagViewoption" style="width: 120px"
                @change="tagViewchange">
            </a-select>

        </div>
        <a-divider>布局切换</a-divider>
        <div class="layout">
            <div class="layout-item" v-for="(i, index) in layoutoption" :key="i.label"
                v-on:click="layoutSetoptionSettion(i)" :class="stylelayout(i)">
                <p class="layout-item-div">
                    <span>
                        {{ i.label }}
                    </span>
                </p>
            </div>
        </div>
    </a-drawer>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { drawerStore } from '/@/stores/drawer'
import { storeToRefs } from 'pinia'
import { DataViewState } from '/@/stores/RouterView'
import { Local } from '/@/units/Store';
import { layoutOption } from '/@/typings/Views';
const draW = drawerStore()

const checked = ref<Boolean>(false)
const afterOpenChange = (bool: boolean) => {
};

const DataView = DataViewState()
const { ThemeConfig } = storeToRefs(DataView)

const themeConfigSetting = computed(() => {
    return ThemeConfig.value
})
const tagViewoption = computed(() => {
    return [
        {
            label: '经典',
            value: 'listgroup'
        },
        {
            label: '默认',
            value: 'lisr'
        },
        {
            label: '标准',
            value: 'listStyleprominent'
        }
    ]
})

const stylelayout = (layoutRows: any): string => {
    if (layoutRows.label === '默认') {
        return !themeConfigSetting.value.collapsed ? 'laryout-active' : ''
    } else if (layoutRows.label === '分栏') {
        return themeConfigSetting.value.collapsed ? 'laryout-active' : ''
    } else {
        return ''
    }
}

const layoutoption = computed(() => {
    return [{
        label: '默认',
        value: () => {
            ThemeConfig.value.collapsed = false
        }
    }, {
        label: '分栏',
        value: () => {
            ThemeConfig.value.collapsed = true
            console.log(themeConfigSetting.value);
        }
    }]
})

// 切换布局
const layoutSetoptionSettion = (layoutRows: layoutOption<Function>): void => {
    layoutRows.value()
    setThemeConfig()
}

watch(() => draW.opendrawer, (newvalue) => {
    if (newvalue) {
        document.body.style.overflow = 'hidden'
    } else {
        document.body.style.overflow = 'auto'
    }
})
// 设置顶栏 |菜单
const TopsetBGs = (data: object): void => {
    document.documentElement.style.setProperty('--wang-Top-bg-color', themeConfigSetting.value.TopbgColor)
    document.documentElement.style.setProperty('--wang-Top-text-color', themeConfigSetting.value.TopfontColor)
    // 菜单部分
    document.documentElement.style.setProperty('--wang-menu-bgcolor', themeConfigSetting.value.menubgColor)
    document.documentElement.style.setProperty('--wang-menu-color', themeConfigSetting.value.menufontColor)
    document.documentElement.style.setProperty('--wang-menu-active', themeConfigSetting.value.menuSelectedColor)
    document.documentElement.style.setProperty('--wang-menu-activetext', themeConfigSetting.value.menuselectfontcolor)
    setThemeConfig()
}

const tagViewchange = (): void => {
    setThemeConfig()
}

// 切换主题
const handleThemeChange = (val: boolean) => {
    draW.setchecked(val)
    if (val) {
        document.documentElement.setAttribute('theme', 'light')
    } else {
        document.documentElement.removeAttribute('theme')
    }
}

const setThemeConfig = (): void => {
    DataView.setThemofisettings(themeConfigSetting.value)
    Local.set('ThemeConfigStyle', document.documentElement.style.cssText)
    Local.set('ThemeConfig', themeConfigSetting.value)
}
defineExpose({
    setThemeConfig
})
</script>

<style lang="scss" scoped>
.ant-divider {
    margin: 0;
}


// 右侧边栏
.css-dev-only-do-not-override-i3mqvl.ant-drawer .ant-drawer-title {
    color: var(--wang-text-color);
}


.css-dev-only-do-not-override-i3mqvl.ant-divider-horizontal.ant-divider-with-text {
    color: var(--wang-text-color);
    border-block-start: 0 var(--wangwang-border)
}


.drawerItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.layout {
    display: flex;

    .layout-item {
        flex: 5;
        margin: 0 10px;
        height: 60px;
        display: flex;
        align-items: center;
        cursor: pointer;
        justify-content: center;
        background-color: var(--futuret-larout-color);

        .layout-item-div {
            transform: rotate(10deg);
            border: 1px solid var(--wang-color-primary-lighter);
            width: 80%;
            text-align: center;
            height: 40px;
            line-height: 40px;
            border-radius: 50%;

            span {
                border: 1px solid var(--wang-color-primary-lighter);
                border-radius: 50%;
                display: inline-block;
            }
        }

        &:hover {
            border: 1px solid var(--wang-color-primary-lighter);
        }
    }

    .laryout-active {
        border: 1px solid var(--wang-color-primary-lighter);
    }
}
</style>